<template>
  <div class="user-container">
    <div class="top-bar">
      <image src="http://data.youxiu.info/yidianBook/nav.png" catchtap="navmap" />
      <div class="top-user">
        <div class="header" v-if="userInfo.openid">
          <img :src="userInfo.avatarUrl" alt />
          <div class="nick">{{userInfo.nickName}}</div>
        </div>
        <div class="header" v-else>
          <img src="../../../static/img/header.png" alt @click="loginImg" />
          <button class="loginHide" @getuserinfo="login" open-type="getUserInfo"></button>
          <button class="login">点击登录</button>
        </div>
      </div>
    </div>
    <yearProgress></yearProgress>
    <div v-if="userInfo.openid">
      <!-- <button @click="scanBook" type="warn">添加图书</button> -->
      <!-- <button @click="deleteBook">删除图书</button> -->
      <!-- <button @click="updateBook">修改图书</button> -->
      <!-- <button @click="getAllBook">获得所有图书</button> -->
      <div class="my-grid">
        <div class="my-grid-item">
          <div class="my-grid-btn" @click="scanBook">
            <img src="http://data.youxiu.info/yidianBook/icon/rainbow.png" alt />
            <p>扫码添加</p>
          </div>
        </div>
        <div class="my-grid-item">
          <div class="my-grid-btn" @click="toMyBooks">
            <img src="http://data.youxiu.info/yidianBook/icon/tree.png" alt />
            <p>我的图书</p>
          </div>
        </div>
        <div class="my-grid-item">
          <a :href="toMyBooks2">
            <div class="my-grid-btn">
              <img src="http://data.youxiu.info/yidianBook/icon/delivery.png" alt />
              <p>我的收藏</p>
            </div>
          </a>
        </div>
      </div>
      <div class="my-grid">
        <div class="my-grid-item">
          <div class="my-grid-btn">
            <img src="http://data.youxiu.info/yidianBook/icon/snack.png" alt />
            <p>最新消息</p>
          </div>
        </div>
        <div class="my-grid-item">
          <div class="my-grid-btn">
            <img src="http://data.youxiu.info/yidianBook/icon/tea-set.png" alt />
            <p>意见反馈</p>
          </div>
        </div>
        <div class="my-grid-item">
          <div class="my-grid-btn" @click="toLogs">
            <img src="http://data.youxiu.info/yidianBook/icon/tomato.png" alt />
            <p>关于图书</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const db = wx.cloud.database();
import { showSuccess } from "@/utils/index";
import yearProgress from "@/components/yearProgress";
export default {
  components: {
    yearProgress
  },
  data() {
    return {
      userInfo: wx.getStorageSync("userInfo") || {}
    };
  },
  created() {},
  computed: {
    toMyBooks2() {
      // console.log(this.userInfo.openid);
      return "/pages/myBooks/main?id=" + this.userInfo.openid;
    }
  },
  methods: {
    toLogs() {
      // 跳转到 更新日志页面
      const url = "/pages/logs/main";
      wx.navigateTo({ url });
    },
    toMyBooks() {
      const url = "/pages/myBooks/main?id=" + this.userInfo.openid;
      // console.log(url);
      wx.navigateTo({ url });
    },
    getAllBook() {
      db
        .collection("yidianBook")
        .where({
          _openid: "olAvO4v3jC_glIjOWIMo8VCFOpWM"
        })
        .get()
        .then(res => {
          console.log(res);
        });
    },
    updateBook() {
      // console.log("数据更新");
      db
        .collection("yidianBook")
        .doc("f3db088f5e88975b0056ea085c849f09")
        .update({
          data: {
            visits: 9
          },
          success: res => {
            // console.log(res);
          }
        });
    },
    deleteBook() {
      wx.showModal({
        title: "删除图书",
        content: `您确定移除此图书吗？`,
        success: res => {
          // console.log("确定删除回调函数");
          return false;
          db
            .collection("yidianBook")
            .doc("f3db088f5e8898b50056f17d29d849ff")
            .remove({
              success: res => {
                // console.log(res);
              }
            });
        }
      });
    },
    async addBook(isbn) {
      //添加图书
      // console.log(isbn);
      wx.showLoading({
        title: "查询中，请稍等",
        mask: true
      });
      const { result } = await wx.cloud.callFunction({
        name: "douban",
        data: { isbn }
      });
      // console.log(result, "result--");
      if (!result) {
        wx.hideLoading();
        wx.showModal({
          title: "添加失败",
          content: `暂不能识别此条形码！请确认为条形码颜色为纯黑色。`
        });
        return false;
      }
      result.visits = 0; //访问量
      result.userInfo = this.userInfo;
      const add = await db.collection("yidianBook").add({
        data: result
      });
      if (add._id) {
        wx.hideLoading();
        wx.showModal({
          title: "添加成功",
          content: `《${result.title}》`
        });
      }
      // console.log(bookinfo)
    },
    scanBook() {
      //调用扫描功能
      wx.scanCode({
        success: res => {
          console.log(res,"scanCode")
          let isbn = res.result;
          this.addBook(isbn);
        },
        fail: err => {
          console.log(err);
        }
      });
    },
    login(e) {
      // console.log(e);
      //登录获取openid
      var _this = this;
      let userInfoGet = e.mp.detail.userInfo;
      if (!userInfoGet) {
        return false;
      }
      wx.cloud.callFunction({
        // 云函数名称
        name: "login",
        // 传给云函数的参数
        data: {
          a: 1,
          b: 2
        },
        success: function(res) {
          showSuccess("登录成功！");
          // console.log(res);
          userInfoGet.openid = res.result.openid;
          // 本地存储
          wx.setStorageSync("userInfo", userInfoGet);
          _this.userInfo = userInfoGet;
        },
        fail: function(err) {
          console.log(err);
        }
      });
    }
  }
};
</script>

<style>
.top-bar {
  widows: 100%;
  position: relative;
}
.top-bar > image {
  width: 100%;
}
.top-user {
  width: 100%;
  position: absolute;
  top: 96px;
}
.top-user .header {
  text-align: center;
  position: relative;
}
.header img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 8px solid rgba(255, 255, 255, 0.2);
}
.header .nick {
  color: #ffffff;
  font-size: 14px;
  line-height: 36px;
}
.header .login {
  width: 120px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  background: none;
}
.header .login::after {
  border: none;
}
.header .loginHide {
  width: 88px;
  height: 130px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  opacity: 0;
}

/* 栅格 */
.my-grid {
  display: block;
  padding: 0 10px;
}
.my-grid-item {
  /* padding: 0 10px; */
  float: left;
  width: 33.3333%;
  /* flex: 1; */
  /* flex-basis: 33.333333%; */
}
.my-grid-btn {
  /* margin: 10px 10px 0 0; */
  box-sizing: border-box;
  border-right: 1px solid #f2f2f2;
  text-align: center;
  margin: 15px 0;
}
.my-grid .my-grid-item:last-child .my-grid-btn {
  border: none;
}
.my-grid-btn img {
  width: 48px;
  height: 48px;
}
.my-grid-btn p {
  font-size: 13px;
}
</style>
